<template>
	<view class="content"> 
		<view class="uheader">
			<!-- <image class="head_img" src="/static/picture/user.png" mode="widthFix"></image> -->
			<uv-swiper :list="projectInfo.carousel" keyName="url" height='360' indicator indicatorMode="line" circular interval="6000"   radius="0"
			:indicatorStyle="{bottom:'120rpx'}" @click='showSwiper'></uv-swiper>  
			<view class="collect fx-row-sta"  @click.stop="collect(projectInfo.id)">
				<image class="mr4" v-if="!projectInfo.userCollectionFlag"  src="@/static/picture/collect.png"></image>
				<image class="mr4" v-else src="@/static/picture/collect_act.png"></image>
				<span >{{projectInfo.followCount}}</span>
			</view>
			<view class="fx-row-sta message "  >
				<image style="width: 100%;height:100%;position: absolute; z-index: 1;" src="@/static/picture/userbg.png" lazy-load></image>
				<view class="head_box fx-col-c">
					<span class="head_tit text-beyond-multi ">{{projectInfo.name}}</span>
				</view>
				<view  class="fx-col-sa head_ri">
					<span class="fx-row-sta head_item text-beyond" >
						<image class="icon" style="width:28rpx;height:26rpx;" src="@/static/picture/shop1.png" mode="widthFix" lazy-load></image>
						<span style="width: 530rpx" class="text-beyond" >{{projectInfo.shopName}}</span>
					</span>
					<view class="fx-row-sta mt16">
						<span class="fx-row-sta head_item" style="width: 270rpx;">
							<image class="icon" style="width:26rpx;height: 30rpx;" src="@/static/picture/address2.png" mode="widthFix" lazy-load></image>
							<span  >{{projectInfo.dist}}</span> km
						</span>
						<span class="fx-row-sta head_item" style="width: 270rpx;">
							<image class="icon"  style="width:22rpx;height: 24rpx;" src="@/static/picture/appraise.png" mode="widthFix" lazy-load></image>
							<span  >技师评分: {{projectInfo.score}}</span> 
						</span>
					</view> 
				</view>
			</view>
		</view>
		
		<view class="utips ">
			<view class=" text-beyond-multi3">{{projectInfo.introduce}}</view>
			<view class="fx-row-sta certificat">
				<view class="fx-row-sta certificat_item" @click="seeCertificat(projectInfo.qualificationCertificate,'技师未上传资格证书',1)">
					<image src="@/static/picture/u-icon1.png"  style="width:20rpx;height: 24rpx;margin-right: 8rpx;"></image>
					<span>资格证</span>
				</view>
				<view class="fx-row-sta certificat_item"  @click="seeCertificat(projectInfo.healthCertificate,'技师未上传健康证书',2)">
					<image src="@/static/picture/u-icon2.png"  style="width:28rpx;height: 24rpx;margin-right: 8rpx;"></image>
					<span>健康证</span>
				</view>
			</view>
		</view>
		<view class="service">
			<!-- <view class="ft32">服务项目</view> -->
			<uv-tabs :list="list" @click="click" lineColor='#fff'  :current='tabindex' @change="infoTab"
				:inactiveStyle="{color:'#727272',fontSize:'28rpx',fontWeight:'500'}"
				:activeStyle="{color:'#000',fontSize:'32rpx',fontWeight:'bold'}"
			></uv-tabs>
			<view class="s_list" v-if="tabindex=='0'">
				<view class="user_item fx-row mb20" v-for="(item,index) in projectLists" :key="item.id" @click.stop="goInfor(item.id)">
					<view class="picture mr26">
						<image :src="item.cover" mode="widthFix" lazy-load></image>  
					</view> 
					<view class="fx-col-sb" style="width: 460rpx;height: 130rpx;">
						<view class="text-beyond ft28"  style="width: 300rpx;font-weight:500">{{item.name}}</view>
						<view class="mt10 ft24 grey1 text-beyond" style="width: 260rpx;">{{item.recommend}}</view> 
						<view class="mt6">
							<span class="mr4 f28 red"><span class="ft20">￥</span>{{integer(item.discountPrice)}}</span>
							<span class="ft20 grey1"  style="text-decoration:line-through"><span>￥</span>{{integer(item.price)}}</span> 
						</view> 
						<view class="item_float fx-row-sta mt10 ft18 grey2"> 
							<image class="img_tip" src="@/static/picture/time.png" mode="widthFix" lazy-load></image>
							<span class="ft18">{{item.duration}}分钟</span> 	
						</view>
						<!-- <view class="item_btn" v-if="projectInfo.status!='10'"> -->
						<view class="item_btn"  v-if="projectInfo.status!='10'"> 
							<uv-number-box v-model="item.num"   :min="0" :max="10"   @change="snum($event,index,item.id,item.discountPrice)" :disabledInput="true">
								<template v-slot:minus>  
									<view :class="['minus',{'disable':item.num=='0'}]"  >
										<uv-icon v-if="item.num!='0'" name="minus" size="12" color="#fff"></uv-icon>
										<uv-icon v-else name="minus" size="12" color="#C7C7C7"></uv-icon>
									</view>
								</template>
								<template v-slot:input>
									<text class="input">{{item.num}}</text>
								</template>
								<template v-slot:plus>
									<view :class="['plus',{'disable':item.num=='10'}]" >
										<uv-icon  v-if="item.num!='10'" name="plus" color="#fff" size="12"></uv-icon>
										<uv-icon  v-else name="plus" color="#C7C7C7" size="12"></uv-icon>
									</view>
								</template>
							</uv-number-box>
						</view> 
					</view> 
				 </view>       
			</view>
			<view class="s_list mt16" v-if="tabindex=='1'"> 
				<view class="eva_item  mb20" v-for="(item,index) in massagistEvaluates" :key="item.id">
					<view class="eva_user fx-row-sta">
						<image class="eva_img" src="@/static/picture/defalut.png"></image>
						<view class="eva_ri">
						 <view class="text-beyond" style="width: 200rpx;">{{item.userName}}</view>
						 <view class="eva_icon fx-row-sta">
							 <image v-for="(item1,index1) in item.score" class="star" src="@/static/picture/eva_act.png"></image>
							 <span v-if="item.score==1">非常差</span>
							 <span v-if="item.score==2">差</span>
							 <span v-if="item.score==3">一般</span>
							 <span v-if="item.score==4">满意</span>
							 <span v-if="item.score==5">非常满意</span>  
						 </view>
						 <view class="eva_time">发布于{{item.createTime}}</view>
						</view>
				 </view>
				 <view class="eva_label fx-row-sta">
					 <view class="label_item" v-for="(items,indexs) in item.tagList">{{items}}</view>
				 </view> 
				 <view v-if="item.explain!=null" class="ft24 text-beyond-multi">{{item.explain}}</view>
				</view> 
				<uv-load-more :status="isLoading" fontSize='12' color='#696969' nomoreText='- 暂无更多评价 -'/>
			</view>
		</view>
		<!-- 预约 -->
		<view style="width: 100%;height: 115rpx;" v-if="projectInfo.status!='10'"></view>
		<view class="fx-row-sb-c orderbtn " v-if="projectInfo.status!='10'">
			<span class="total ft26">合计:<span class="red">￥</span><span class="red ft40">{{allPrice}}</span></span>
			<!--   判断休息中不可预约-->  
			<span class="gobtn" @click="subscribe" >立即预约</span>
		</view>
		<!-- 健康证、资格证弹窗 --> 
		<uv-overlay :show="show" @click="show=false">
			<view class="carbox">
				<view  class="cer_imgbox">
					<image :src="certificatImg" mode="widthFix"></image>
					<view class="close_btn">
						<image src="@/static/picture/close.png" mode="widthFix"></image>
						<!-- <uv-icon name="close-circle-fill" color="#AD8539" @click="show=false" size='20'></uv-icon> -->
					</view> 
				</view>
				<view class="cer_tip">{{title}}</view> 
			</view>
		</uv-overlay>
	</view>
</template>

<script>
	import {massagistDetails,geturl,isToken,collection,massagistEvaluatePage } from '@/utils/api.js' 
	import { toast } from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	import badgeMix from '@/common/mixins.js'
	import config from '@/config.js' 
	export default { 
		mixins: [badgeMix],
		data() {
			return { 
				projectLists:[], //技师可服务项目
				massagistEvaluates:[], //评价列表
				massagistId:'',//技师id
				addOrderId:'',  //项目id
				addOrderNum:'',  //项目数量
				projectInfo:{}, //技师详情
				allPrice:'0.00', //预约总价
				bannerlist:[],
				list: [{
					name: '服务项目',
				}, {
					name: '顾客评价',
				}, ],
				tabindex:'0',
				isLoading:'nomore',  //是否加载中
				pageNum:1,//请求的页码
				pageSize:10,//请求的条数 
				certificatImg:'',
				title:'',
				show:false
			}
		},
		onLoad(option) {
			this.massagistId = option.id
			this.getDetail(option.id) 
		},
		methods: { 
			// 轮播图图片预览 
			showSwiper(e){ 
				this.bannerlist = this.projectInfo.carousel.map(item => item.url); 
				uni.previewImage({
					current: e, //预览图片的下标
					urls: this.bannerlist //预览图片的地址，必须要数组形式
				}) 
			},
			// 查看证书
			seeCertificat(url,tips,index){
				if(url==null || !url){
					return uni.showToast({
						title:tips,
						icon:'none'
					})
				}
				this.certificatImg = url
				index==1?this.title='资格证':this.title='健康证'
				// this.$refs.popup.open();
				this.show = true
				// var imgarr = [url] 
				// uni.previewImage({
				// 	current: 0, //预览图片的下标
				// 	urls: imgarr //预览图片的地址，必须要数组形式
				// }) 
			},
			// 技师收藏
			collect(id){
				this.isCollect(id).then((res)=>{
					this.getDetail(id)
				})   
			},
			// 切换tab
			infoTab(e){
				this.tabindex = e.index
				if(e.index=='1'){  
					this.massagistEvaluates = []
					this.pageNum = 1
					this.getEvaluate()
				}
			},
			//获取顾客评价
			getEvaluate(){
				this.isLoading = 'loading'
				massagistEvaluatePage({
					"current": this.pageNum,  //页码
					"size": this.pageSize,   //条数
					"massagistId": this.massagistId
				}).then((res) => {
					if(res.code == '200'){ 
						if(this.pageNum == 1){
							console.log('清空数据',this.pageNum);
							this.massagistEvaluates = []
						}
						const data = res.result.records  
						this.massagistEvaluates = [...this.massagistEvaluates,...data]
						console.log(data);
						if(data.length < this.pageSize){
							this.isLoading = 'nomore'
						} 
					}  
				})
			},
			// 项目数量改变
			snum(e,index,id,discountPrice){
				console.log(this.projectLists); 
				// this.project[index].num = e.value
				this.addOrderNum = e.value 
				this.$nextTick(()=>{
					// this.allPrice = (this.integer(discountPrice) * e.value).toFixed(2)
					this.allPrice = ( (discountPrice / 100).toFixed(2) * e.value).toFixed(2)
				})
				this.projectLists.forEach((item,indexs)=>{
					console.log(item.num,typeof(item));
					if(id !== item.id){
						this.projectLists[indexs].num = 0
					}else{
						this.addOrderId = this.projectLists[indexs].id
					}
				})
			},
			// 技师详情
			getDetail(id){ 
				const datas = {
					'massagistId':id,
					"lon":uni.getStorageSync('longitude'),  //经度
					"lat":uni.getStorageSync('latitude'),  //纬度 
					// #ifdef MP-WEIXIN
					"source" : 'WeChatMini',
					"version" : config.appInfo.version
					// #endif
				}
				massagistDetails(datas).then((res) => {
					console.log(res);  
					if(res.code == '200'){ 
						res.result.serviceList.forEach((item,index)=>{
							res.result.serviceList[index].num = 0
						})
						this.projectLists = res.result.serviceList 
						// this.massagistEvaluates = res.result.massagistEvaluates
						res.result.dist = parseFloat(res.result.dist).toFixed(2)
						this.projectInfo = res.result
						this.massagistEvaluates = []
						this.pageNum = 1
						this.getEvaluate()
					}
				}) 
			},
			// 立即预约
			async subscribe(){ 
				var _this = this;
				this.enterPrecontract(_this.massagistId).then((res)=>{ 
					if(res == 200){
						if(!_this.addOrderId){
							return toast('请添加需要服务的项目！')
						}
						if(_this.addOrderNum==0){
							return toast('请添加需要服务的项目数量！')
						}
						console.log(`/pages/order/orderPay?pid=${_this.addOrderId}&mid=${_this.massagistId}&num=${_this.addOrderNum}`);
						uni.navigateTo({
							url:`/pages/order/orderPay?pid=${_this.addOrderId}&mid=${_this.massagistId}&num=${_this.addOrderNum}`
						})
					}else if(res.code == 8001){
						toast(res.message)
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}
				})  
			},
			goInfor(projectId){ 
				uni.navigateTo({
					url:'/pages/index/details?id='+projectId
				})
			},
		},
		// 上拉刷新
　　onReachBottom() {  
			if(this.tabindex=='1'){
				if(this.isLoading=='nomore'){ return; }
				this.pageNum++ 
				this.getEvaluate()
			}
		},
	}
</script>

<style lang="scss">
	page{
		background-color:$uni-main-page ;
	} 
	.uheader{
		position: relative;
		width: 750rpx;
		height: 720rpx;
		overflow: hidden;
		.head_img{
			width: 100%;
		} 
		.collect{
			position: absolute;
			bottom: 128rpx;
			right: 26rpx;
			height: 44rpx;
			padding: 0 30rpx;
			background-color: #fff;
			border-radius: 22rpx;
			font-size: 24rpx;
			color: #980000;
			image{
				width: 28rpx;
				height: 26rpx;
				margin-right: 4rpx;
			}
		}
	}
	.message{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 750rpx; 
		height: 114rpx;
		background-size:  100% auto;
		color: #980000;
		.head_box{
			width: 174rpx;
			height: 114rpx;
			padding: 0 20rpx;
			border-radius: 25rpx 0 25rpx 0;
			background-color: #FFE0E0;
			z-index: 2;
		}
		.head_ri{
			width: 540rpx;
			padding: 0 18rpx;
		}
		.head_tit{
			// width: 140rpx;
			// height: 92rpx;
			// padding: 0 20rpx;
			// border-radius: 25rpx 0 25rpx 0;
			// background-color: #FFE0E0;
			// line-height: 92rpx;
			font-size: 28rpx;
			text-align: center; 
			font-weight: 600;
			
		}
		.head_item{ 
			
			// padding: 0 20rpx;
			font-size: 24rpx; 
			z-index: 2;
			.icon{ 
				margin-right: 6rpx;
			}
		}
	}
	.utips{
		width: 660rpx; 
		padding: 24rpx 45rpx;
		background-color: #fff;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		font-size: 22rpx;
		color: #696969;
		line-height: 38rpx;
		.certificat{
			margin-top: 24rpx;
			padding-top: 24rpx;
			border-top: 1rpx solid #eee;
			.certificat_item{
				height: 44rpx;
				padding: 0 18rpx;
				margin-right: 40rpx;
				border: 1rpx solid #eee;
				border-radius: 8rpx;
			}
		}
	}
	.service{
		width: 700rpx;
		padding: 15rpx 25rpx 30rpx 25rpx;
		margin-top: 15rpx;
		background-color: #fff;
		border-radius: 12rpx 12rpx 0rpx 0rpx;
		.s_list{
			.user_item{
				position: relative;
				width:700rpx;
				padding:22rpx 0 28rpx 0;
				background-color: #fff;
				// border-radius: 12rpx;
				border-bottom: 1rpx solid $uni-color-line;
				// box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0,0,0,0.1);
				.picture{
					position: relative;
					width: 160rpx;
					height: 130rpx;
					border-radius:16rpx;
					overflow: hidden; 
					image{
						width: 100%;
					} 
				} 
				.img_tip{
					width: 20rpx;
					height: 20rpx;
					margin-right: 4rpx;
				}
				.item_float{
					position: absolute;
					right: 20rpx;  
				}
				.item_btn{
					position: absolute;
					right: 20rpx;
					bottom: 28rpx;
					width: 178rpx;
					height: 46rpx;  
				}
			}
			.user_item:last-child{
				border-bottom: 0;
			} 
		}
		.eva_item{
			margin-bottom: 30rpx;
			.eva_user{
				position: relative;
				.eva_img{
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
				}
				.eva_ri{
					width: 620rpx;
					font-size: 26rpx;
					color: #3f3f3f;
					.eva_icon{
						font-size: 24rpx;
						color: #646464;
					}
					.star{
						width: 20rpx;
						height: 20rpx;
						margin-right: 2rpx;
					}
					.eva_time{
						position: absolute;
						right: 0;
						top: 0;
						font-size: 24rpx;
						color: #939393;
					}
				}
			}
			.eva_label{
				flex-wrap: wrap;
				margin-top: 20rpx;
				.label_item{
					padding: 6rpx 20rpx;
					margin-right: 16rpx;
					margin-bottom: 14rpx;
					background-color: #F9F6F0;
					font-size: 24rpx;
					color: #AD8539;
				}
			}
		}
	}
	.uv-tabs__wrapper__nav__item{
		padding: 0 50rpx 0 0 !important;
	}
	.orderbtn{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 700rpx;
		height: 115rpx;
		padding: 0 25rpx;
		background-color: #fff;
		border-top: 1rpx solid #f9f9f9;
		z-index: 3;
		.gobtn{
			width: 240rpx;
			height: 76rpx;
			background-color: $uni-main;
			border-radius: 38rpx;
			text-align: center;
			font-size: 28rpx;
			color: #fff;
			line-height: 76rpx;
		}
	}
	.carbox{
		position: fixed;
		top:-10%;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 616rpx;
		height: 356rpx;
		border-radius: 10rpx;
		background-color: #fff;
		
	}
	.cer_imgbox{
		width: 616rpx;
		height: 288rpx;
		border-radius: 10rpx 10rpx 0 0;
		// padding: 10rpx 10rpx 0 10rpx;
		image{
			width: 616rpx;
			border-radius: 10rpx 10rpx 0 0;
			// border-radius: 10rpx;
		}
	}
	.cer_tip{
		width: 100%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #EFF2F7;
		border-radius: 0 0 10rpx 10rpx;
		font-size: 30rpx;
		color: #585D6E;
	}
	.close_btn{
		position: absolute;
		right: -18rpx;
		top: -18rpx;    
		image{
			width: 46rpx;
			height: 46rpx;
		}
	}
	 
</style>
